<template>
    <div class="main-container">
        <!-- <div class="main-flex">
            <Button type="solid">Solid Button</Button>
            <Button type="outlined">Outlined Button</Button>
            <Button type="dashed">Dashed Button</Button>
            <Button type="filled">Filled Button</Button>
            <Button type="text">Text Button</Button>
            <Button type="link">Link Button</Button>
        </div>
        <div class="main-flex">
            <Button color="primary">Primary Button</Button>
            <Button color="primary" type="outlined">Outlined Button</Button>
            <Button color="primary" type="dashed">Dashed Button</Button>
            <Button color="primary" type="filled">Filled Button</Button>
            <Button color="primary" type="text">Text Button</Button>
            <Button color="primary" type="link">Link Button</Button>
        </div>
        <div class="main-flex">
            <Button color="danger">Danger Button</Button>
            <Button color="danger" type="outlined">Outlined Button</Button>
            <Button color="danger" type="dashed">Dashed Button</Button>
            <Button color="danger" type="filled">Filled Button</Button>
            <Button color="danger" type="text">Text Button</Button>
            <Button color="danger" type="link">Link Button</Button>
        </div>
        <div class="main-flex">
            <Button color="success">Success Button</Button>
            <Button color="success" type="outlined">Outlined Button</Button>
            <Button color="success" type="dashed">Dashed Button</Button>
            <Button color="success" type="filled">Filled Button</Button>
            <Button color="success" type="text">Text Button</Button>
            <Button color="success" type="link">Link Button</Button>
        </div>
        <div class="main-flex">
            <Button color="warning">Success Button</Button>
            <Button color="warning" type="outlined">Outlined Button</Button>
            <Button color="warning" type="dashed">Dashed Button</Button>
            <Button color="warning" type="filled">Filled Button</Button>
            <Button color="warning" type="text">Text Button</Button>
            <Button color="warning" type="link">Link Button</Button>
        </div>
        <div class="main-flex">
            <Button color="info">Info Button</Button>
            <Button color="info" type="outlined">Outlined Button</Button>
            <Button color="info" type="dashed">Dashed Button</Button>
            <Button color="info" type="filled">Filled Button</Button>
            <Button color="info" type="text">Text Button</Button>
            <Button color="info" type="link">Link Button</Button>
        </div>
        <div class="main-flex">
            <Button type="solid" shape="circle">ABCD</Button>
        </div>
        <div class="main-flex">
            <Button type="outlined" size="large">Large Button</Button>
            <Button type="outlined">Default Button</Button>
            <Button type="outlined" size="small">Small Button</Button>
        </div>
        <div class="main-flex">
            <Button type="outlined" icon="tyus-icon-search">Default Button</Button>
            <Button type="outlined" icon="tyus-icon-search" iconPosition="end">Default Button</Button>
        </div> -->
        <div v-for="item in listData">
            {{ item.label }}
        </div>
        <span>上一页</span>
        <span>下一页</span>
    </div>
</template>

<script setup>
import Editor from '@/components/Editor.vue';
import Button from '@/components/components/Button';

import { ref, getCurrentInstance, onMounted } from 'vue';
import frontEndPagination from '../../methods/common/frontEndPagination';
const { pageModel, initTable } = frontEndPagination();

const tableData = ref([
    { label: 1, value: '测试13' },
    { label: 2, value: '测试12' },
    { label: 3, value: '测试11' },
    { label: 4, value: '测试10' },
    { label: 5, value: '测试9' },
    { label: 6, value: '测试8' },
    { label: 7, value: '测试7' },
    { label: 8, value: '测试6' },
    { label: 9, value: '测试5' },
    { label: 10, value: '测试4' },
    { label: 11, value: '测试3' },
    { label: 12, value: '测试2' },
    { label: 13, value: '测试1' },
]);

const search = ref({
    label: '',
    value: '',
});

const listData = ref([]);

onMounted(() => {
    listData.value = initTable(tableData.value, search.value);
});
</script>

<style lang="scss" scoped>
.main-container {
    .main-flex {
        display: flex;
        gap: 5px;

        margin-top: 5px;

        &:first-child {
            margin-top: 0;
        }
    }
}
</style>
../../methods/common/frontEndPagination
